<!DOCTYPE html>
<html>

<head>
    <meta charset="utf - 8">
    <title></title>
    <script type="text/javascript">
        let sh = [];
        function init() {
            let xhr = new XMLHttpRequest();
            xhr.open("GET", "class.json", false);
            xhr.send();
            let data = xhr.responseText;
            sh = JSON.parse(data);
            let p = document.getElementById("p");
            let c = document.getElementById("c");
            for (let i = 0; i < sh.length; i++) {
                p.options[i] = new Option(sh[i].aca);
            }
            for (let i = 0; i < sh[0].major.length; i++) {
                c.options[i] = new Option(sh[0].major[i]);
            }
            updateDisplay(); // 初始化时更新显示信息
        }
        function change() {
            let p = document.getElementById("p");
            let c = document.getElementById("c");
            c.length = 0;
            let n = p.selectedIndex;
            for (let i = 0; i < sh[n].major.length; i++) {
                c.options[i] = new Option(sh[n].major[i]);
            }
            updateDisplay(); 
        }
        function updateMajorDisplay() {
            updateDisplay(); 
        }
        function updateDisplay() {
            let p = document.getElementById("p");
            let c = document.getElementById("c");
            let chan = document.getElementById("chan");
            let selectedCollege = p.options[p.selectedIndex].text;
            let selectedMajor = c.options[c.selectedIndex].text;
			chan.style.color="blue"
            chan.textContent = `所选专业:${selectedCollege}.${selectedMajor}`;
        }
    </script>
</head>
<body onload="init()">
    学院：<select id="p" onchange="change()"></select>
    专业：<select id="c" onchange="updateMajorDisplay()"></select><br>
    <p id="chan" color="blue">所选专业:</p>
</body>
</html>
